<template>
  <div>
    <!-- <div>
     <van-nav-bar
     title="标题"
     left-text="返回"
     right-text="按钮"
     left-arrow
     @click-left="onClickLeft"
     @click-right="onClickRight"/> 
    </div> -->
    {{classify_id}},{{classify_id2}},{{classify_id3}}
    <div class="root">
    <div class="nva">
        <span>需求模式：</span><a v-for="(item,i) in datas" :key="i" @click="getclassify(item.id)">{{item.name}}&emsp;</a>
    </div>

    <div class="nva">
        <span>需求分类：</span><a v-for="(item,i) in data1" :key="i" @click="getclassify1(item.id)">{{item.name}}&emsp;</a>
    </div>
    <div class="nva"  v-if="data2.length != 0">
        <span>二级类目：</span><a v-for="(item,i) in data2" :key="i" @click="getclassify2(item.id)">{{item.name}}&emsp;</a>
    </div>
    <div class="nva" v-if="data3.length != 0">
        <span>三级类目：</span><a v-for="(item,i) in data3" :key="i" @click="getclassify3(item.id)">{{item.name}}&emsp;</a>
    </div>
    <div>
    </div>
    </div>
    <br><br><br><br><br><br><br><br><br>
    <div>
      <table border="0px" width='450px' align='center'>
        <tr >
            <td>首页</td>
            <td>雇主</td>
            <td>服务商</td>
            <td>我的</td>

        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import {get,post} from '../utils/request'
export default {
    data(){
        return{
            cate_data:[],
            datas:[{'id':0,'name':'全部'},{'id':1,'name':'招标'},{'id':2,'name':'比稿'},{'id':3,'name':'购买服务'},{'id':4,'name':'兼职'}],
            data1:[],
            data2:[],
            data3:[],
            want_id:0,
            classify_id:0,
            classify_id2:0,
            classify_id3:0
        }
    },
    methods: {

      getclassify(cid){
        get('http://127.0.0.1:8000/user/classify/',{params:{'want_id':cid,'classify_id':0,'classify_id2':0,'classify_id3':0}})
        .then(resp=>{
        console.log(resp)
        if (resp.data.code == 200){
          // this.data1=this.data1.concat(resp.data.data)  两个列表合并
          this.data1=resp.data.data
        }
      }).catch(err=>{
        console.log(err)
      })
      },
      getclassify1(cid){
        if (cid!=0){
          get('http://127.0.0.1:8000/user/classify/',{params:{'want_id':this.want_id,'classify_id':cid,'classify_id2':0,'classify_id3':0}})
          .then(resp=>{
            console.log(resp)
            this.classify_id=cid
            this.data3=[]
            if (resp.data.code == 200){
              this.data2=resp.data.data
            }
            }).catch(err=>{
              console.log(err)
            })
        }else{
          this.data3=[]
          this.data2=[]
          this.classify_id=0
          this.classify_id2=0
          this.classify_id3=0
        }
      },
      getclassify2(cid){
        if (cid!=0){
          get('http://127.0.0.1:8000/user/classify/',{params:{'want_id':this.want_id,'classify_id':this.classify_id,'classify_id2':cid,'classify_id3':0}})
          .then(resp=>{
            console.log(resp)
            this.classify_id2=cid
            if (resp.data.code == 200){
              this.data3=resp.data.data
            }
            }).catch(err=>{
              console.log(err)
            })
        }else{
          this.data3=[]
          this.classify_id2=0
          this.classify_id3=0
        }
      //   get('http://127.0.0.1:8000/user/classify/',{params:{'want_id':4,'classify_id':this.classify_id,'classify_id2':cid,'classify_id3':0}})
      //   .then(resp=>{
      //   console.log(resp)
      //   this.classify_id2=cid
      //   if (resp.data.code == 200){
      //     this.data3=resp.data.data
      //   }
      // }).catch(err=>{
      //   console.log(err)
      // })
      },
      getclassify3(cid){
        get('http://127.0.0.1:8000/user/classify/',{params:{'want_id':this.want_id,'classify_id':this.classify_id,'classify_id2':this.classify_id2,'classify_id3':cid}})
        .then(resp=>{
        console.log(resp)
        this.classify_id3=cid
      }).catch(err=>{
        console.log(err)
      })
      },
    },
    mounted(){
      this.getclassify(0);
    }
}
</script>

<style>


.nva{
  /* list-style: none; */
  /* float: left; */
  /* margin-left: 15px; */
  width: 800px;
  margin-top: 30px;
  text-align: left;
  margin-left: 100px;
}
.root{
  margin: auto;
  width: 800;
}
</style>